<template>
  <el-container class="exam-page">
    <!-- 左侧部分不展示 -->

    <!-- 中间部分：竞赛功能 -->
    <el-main class="exam-main">
      <div class="center-box">
        <div class="exam-option-group flex-row justify-between">
          <el-button
            v-for="option in options"
            :key="option.value"
            @click="selectOption(option.value)"
            :type="selectedOption === option.value ? 'primary' : 'default'"
            class="option-button"
          >
            {{ option.label }}
          </el-button>
        </div>

        <div class="exam-list-section">
          <span class="exam-list-title">
            {{ selectedOption === 0 ? '未完赛竞赛' : '历史竞赛' }}
          </span>
          <el-form inline="true" class="exam-navigation flex-row justify-between">
            <el-form-item
              label="竞赛时间"
              prop="datetimerange"
              class="exam-navigation-box"
            >
              <el-date-picker
                style="width: 360px"
                v-model="params.datetimerange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="onSearch" plain type="primary">搜索</el-button>
              <el-button @click="onReset" plain type="info">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="exam-list-group flex-row">
            <el-card
              class="exam-list-item"
              v-for="(exam, index) in examList"
              :key="index"
              shadow="hover"
            >
              <template #header>
                <span class="exam-title">{{ exam.title }}</span>
              </template>
              <div class="exam-content">
                <p>开赛时间：{{ exam.startTime }}</p>
                <p>结束时间：{{ exam.endTime }}</p>
              </div>
            </el-card>
          </div>
          <div class="exam-page-pagination flex-row">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              v-model:current-page="params.pageNum"
              v-model:page-size="params.pageSize"
              :page-sizes="[3, 6, 9, 12]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-main>

    <!-- 右侧部分：热门竞赛和最新竞赛 -->
    <el-aside width="300px" class="exam-aside-right">
      <el-card shadow="hover" class="card">
        <template #header>
          <div class="card-header">热门竞赛 TOP10</div>
        </template>
        <div class="hot-list">
          <div
            v-for="(hot, idx) in hotExams"
            :key="hot.id"
            class="hot-item"
          >
            <span class="hot-index">{{ idx + 1 }}</span>
            <span class="hot-title">{{ hot.title }}</span>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="card">
        <template #header>
          <div class="card-header">最新竞赛 TOP10</div>
        </template>
        <div class="new-list">
          <div
            v-for="(latest, idx) in latestExams"
            :key="latest.id"
            class="new-item"
          >
            <span class="new-index">{{ idx + 1 }}</span>
            <span class="new-title">{{ latest.title }}</span>
          </div>
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getExamListService } from "@/apis/exam";

// 参数定义
const examList = ref([]); // 推荐竞赛列表
const total = ref(0);
const selectedOption = ref(0); // 初始化选中的文本
const options = ref([
  { label: "未完赛", value: 0 },
  { label: "历史竞赛", value: 1 },
]);

const params = reactive({
  pageNum: 1,
  pageSize: 9,
  type: 0,
  datetimerange: [],
});

const hotExams = ref([]); // 热门竞赛列表
const latestExams = ref([]); // 最新竞赛列表

// 获取推荐竞赛列表
async function getExamList() {
  const result = await getExamListService(params);
  examList.value = result.rows;
  total.value = result.total;
}

// 获取热门竞赛列表
async function getHotExams() {
  // 模拟接口调用
  hotExams.value = [
    { id: 1, title: "热门竞赛 1" },
    { id: 2, title: "热门竞赛 2" },
    // ...
  ];
}

// 获取最新竞赛列表
async function getLatestExams() {
  // 模拟接口调用
  latestExams.value = [
    { id: 1, title: "最新竞赛 1" },
    { id: 2, title: "最新竞赛 2" },
    // ...
  ];
}

onMounted(() => {
  getExamList();
  getHotExams();
  getLatestExams();
});

// 切换竞赛类型
function selectOption(type) {
  selectedOption.value = type;
  params.pageNum = 1;
  params.type = type;
  getExamList();
}

// 搜索/重置
function onSearch() {
  params.pageNum = 1;
  getExamList();
}

function onReset() {
  params.pageNum = 1;
  params.pageSize = 9;
  params.type = 0;
  params.datetimerange = [];
  getExamList();
}

// 分页
function handleSizeChange(newSize) {
  params.pageNum = 1;
  getExamList();
}

function handleCurrentChange(newPage) {
  getExamList();
}
</script>

<style lang="scss" scoped>
.exam-page {
  display: flex;
  margin-top: -60px;
  max-width: 100%;
  background-color: rgba(247, 247, 247, 1);
  justify-content: center;

  .exam-main {
    flex: 1;
    padding: 20px;
    max-width: 800px;

    .center-box {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .exam-option-group {
      margin-bottom: 20px;

      .option-button {
        border-radius: 20px;
        padding: 5px 20px;
      }
    }

    .exam-list-section {
      .exam-list-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
      }

      .exam-list-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;

        .exam-list-item {
          border-radius: 8px;
          overflow: hidden;
          transition: transform 0.3s;

          &:hover {
            transform: translateY(-5px);
          }

          .exam-title {
            font-size: 16px;
            font-weight: bold;
          }

          .exam-content {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }

  .exam-aside-right {
    width: 300px;
    padding: 20px;

    .card {
      margin-bottom: 16px;
      border-radius: 8px;
      overflow: hidden;

      .card-header {
        font-weight: 600;
        color: var(--text-color);
      }

      .hot-list,
      .new-list {
        .hot-item,
        .new-item {
          display: flex;
          justify-content: space-between;
          padding: 8px 0;
          border-bottom: 1px solid #f0f0f0;

          .hot-index,
          .new-index {
            font-weight: bold;
            color: #ff5722;
          }

          .hot-title,
          .new-title {
            flex: 1;
            margin-left: 8px;
            color: var(--text-color);
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
